<template>
    <div class="base-model" @contextmenu.native.prevent>
        <el-container class="container">
            <transition name="animate__animated " enter-active-class="animate__fadeInDown"
                leave-active-class="animate__fadeOutUp animate__faster">
                <c_header @openMenu="showMenu = true" />
            </transition>
            <transition name="animate__animated " enter-active-class="animate__slideInDown"
                leave-active-class="animate__fadeOutUpBig animate__faster">
                <c_tagMenu style="z-index: 1;" />
            </transition>
            <el-drawer :show-close="false" :with-header="false" size="350px" v-model="showMenu" direction="ltr"
                class="menu-drawer forbid-select" @open="openMenu" @closed="close">
                <c_menu class="c_menu" @click="click" />
            </el-drawer>
            <el-main class="inner-main" ref="main">
                <el-config-provider :locale="zhCn" :message="{ max: 3 }">
                    <slot />
                </el-config-provider>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { useEventListener } from "@vueuse/core"
import { usePageRefresh, useModalSize } from "@usehook"
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import router from "@/router"

const openMenu = () => {
    useModalSize()
}

const close = () => {
    useModalSize(false)
}

// 是否显示目录
let showMenu = $ref(false)

const keyDown = (e) => {
    const { key, keyCode, ctrlKey, altKey } = e

    if ((key === 'KeyE' || keyCode === 69) && (ctrlKey || altKey)) {
        e.preventDefault(); //关闭浏览器快捷键
        showMenu = !showMenu
    }

    const focus = document.activeElement === document.body || document.activeElement === document.querySelector(".el-drawer__sr-focus");
    if ((key === 'Tab' || keyCode === 9) && focus && (!useModalSize.get() || showMenu)) {
        e.preventDefault(); //关闭浏览器快捷键
        showMenu = !showMenu
    }
}

usePageRefresh((type) => {
    if (type === 'refresh') {
        localStorage.setItem("refresh", new Date().getTime() + "")
        localStorage.setItem("showCalendarInfo", true)
        localStorage.setItem("lastPageTitle", router.currentRoute.value.meta.title)
    } else {
        localStorage.setItem("close", new Date().getTime() + "")
    }
})

onMounted(() => {
    addEventListener("keydown", keyDown)
    // 禁用保存
    useEventListener(document, 'keydown', (event) => {
        if (event.code === 'KeyS' && event.ctrlKey) {
            event.preventDefault()
        }
    })
})

const click = () => {
    showMenu = false
}
</script>

<style lang="scss" scoped>
:deep(.inner-main) {
    height: var(--main-height); //calc(100vh - v-bind(height));
    padding: 0;
    overflow: hidden;
    color: var(--font-color);
    z-index: 1;

    @media screen and (min-width: 200px) and (max-width: 900px) {
        width: 100% !important;
    }

    @media screen and (min-width: 200px) and (max-width: 400px) {
        max-height: calc(100vh - 65px);
    }
}

:deep(.container) {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
    background-size: cover;

    @media screen and (min-width: 200px) and (max-width: 400px) {
        background-position: 50% !important;
    }
}

:deep(.base-model) {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
}

/* 定义一个名为rotate的动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

:deep(.menu-drawer.el-drawer .el-drawer__body) {
    padding: 10px 0
}

:deep(.menu-title-name) {
    height: calc(var(--font-size) * 2) !important;
    margin: 10px 0 !important;
    font-size: calc(var(--font-size) * 2) !important;
    color: var(--font-color);
    font-weight: bold;
}
</style>